<template>
  <div>
    <van-nav-bar left-arrow @click-left="$router.back()">
      <template #title>
        <search></search>
      </template>
      <template #right>
        <van-icon
          name="map-marked"
          size="25"
          color="#00ae66"
          @click="$router.push('/map')"
        />
      </template>
    </van-nav-bar>
    <!-- 筛选区域 -->
    <van-dropdown-menu active-color="#21b97a">
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
      <van-dropdown-item v-model="value3" :options="option3" />
      <van-dropdown-item v-model="value4" :options="option4" />
    </van-dropdown-menu>
    <!-- 找房渲染列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <find-item
        v-for="item in houseList"
        :key="item.houseCode"
        :item="item"></find-item>
    </van-list>
    <div style="height: 50px;"></div>
  </div>
</template>

<script>
import { getHouse, imgStitching } from '@/api/house'
import Search from '@/components/search.vue'
import FindItem from '@/components/FindItem.vue'
export default {
  name: 'HousePage',
  components: { Search, FindItem },
  props: {},
  data () {
    return {
      loading: false,
      finished: false,
      houseList: [],
      start: 1,
      end: 20,
      count: '',
      value1: 0,
      value2: 'a',
      value3: '0',
      value4: '0',
      option1: [{ text: '区域', value: 0 }],
      option2: [{ text: '方式', value: 'a' }],
      option3: [{ text: '租金', value: '0' }],
      option4: [{ text: '筛选', value: '0' }]
    }
  },
  watch: {},
  computed: {},
  created () {

  },

  mounted () {},
  methods: {
    async getHouse () {
      const toast = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner'
      })
      const { data: { body } } = await getHouse({
        cityId: 'AREA|88cff55c-aaa4-e2e0',
        start: this.start,
        end: this.end
      })
      this.count = body.count
      console.log(this.count)

      const res = imgStitching(body.list)
      console.log(body)
      this.houseList.push(...res)
      toast.clear()
      this.$toast(`共找到${body.count}套房源`)
      this.loading = false
      if (this.end > this.count) {
        this.finished = true
        return
      }
      this.start += 20
      this.end += 20
    },
    async onLoad () {
      this.getHouse()
      console.log(this.count)
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.van-nav-bar__content {
  background-color: #f6f5f6;
}
/deep/.van-search__content {
  background-color: #fff;
}
/deep/.van-nav-bar__title {
  max-width: 300px !important;
  margin: 0 25px;
}

/deep/.van-nav-bar__left {
  left: -10px;
}
</style>
